<HTML>

    <HEAD>
        <title>todolist</title>
    </HEAD>

    <body>
        <div class="group">
            <!-- 输入框 -->
            <input type="text" name="test" id="todovalueid" placeholder="input" onkeydown="valuechange(event)" />
            <button type="button">button1 <tton>
            <button type="submit">button2 <tton>
            <input type="button" value="button3"  onclick="handclick()"></input>
            <!-- 遍历数据 -->
            <div id="todolist"> 
                    <div class="item" onmouseenter="test1(0)" onmouseleave="test2(0)">
                        <input class="item-chk" type="checkbox" />
                        <div class="item-sp"> 吃饭</div>
                        <input id="item-del-0" type="button" value="delete" onclick="handleclickdel(0)"></input>
                    </div>
                    <div class="item" onmouseenter="test1(1)" onmouseleave="test2(1)">
                        <input class="item-chk" type="checkbox" />
                        <div class="item-sp"> 睡觉</div>
                        <input id="item-del-1" type="button" value="delete" onclick="handleclickdel(1)"></input>
                    </div>
                    <div class="item" onmouseenter="test1(2)" onmouseleave="test2(2)">
                        <input class="item-chk" type="checkbox" />
                        <div class="item-sp"> 打篮球</div>
                        <input id="item-del-2" type="button" value="delete" onclick="handleclickdel(2)"></input>
                    </div>
            </div>
            <!-- 操作的footer -->
        </div>
    </body>

    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .group{
            border: 1px solid rgb(255, 174, 0);
            padding: 50px;
            border-radius: 10px ;
        }
        .item{
            margin: 3px;
            padding: 3px;
            border-radius: 10px;
            display: flex;
            align-items: center;
        }
        .item-sp{
            flex-grow: 1;
        }
        .item-del{
            background-color: rgb(0, 157, 255);border: opx;
            color:rgb(240, 255, 241);
            opacity: 0;
        }

    </style>

    <script>
        var index=0;
        function init(){
            document.getElementById("button2").onclick=handclick;
        }
        function valuechange(e){
            console.log(e);
            if(event.keyCode==13){
                handclick();
            }
        }
        function handclick(){
            //alert("test")
            
            var tmp=document.getElementsByName("test")[0].value;
            //alert("cnt="+tmp);
            // var tmp2=document.getElementById("todolist").innerHTML;
            // document.getElementById("todolist").innerHTML="<div>"+tmp2+tmp+"</div>";
            var tmp2=document.createElement("div");
            tmp2.innerText=tmp;
            document.getElementById("todolist").append(tmp2);
        }
        function test1(index){
            console.log("item-del-"+index);
            document.getElementById("todolist").children[index].style = "background-color:rgba(255,0,255,0.1) ";
            document.getElementById("item-del-"+index).style = "opacity: 1;";
        }
        function test2(index){
            console.log("item-del-"+index);
            document.getElementById("todolist").children[index].style = "";
            document.getElementById("item-del-"+index).style = "opacity: 0;";
        }
        function handleclickdel(index){
            var arr = document.getElementById("todolist");
            document.getElementById("todolist").removeChild(arr.childNodes[index]);
        }
    </script>
</HTML>